import React from "react"
import { View } from "@tarojs/components"
import { Image, Popup } from "@taroify/core"
import { navigation } from "@/utils/router"
import { pageMapperCommunity, PagePath } from "@/constants/pageMap"
import { authActionHandler } from "@/utils/app"
import styles from "./index.module.scss"

type IProps = {
  open: boolean
  closeFn(): void
  /** 话题id */
  topicId: number
}
/**
 * @component GpChatActionPopup
 * @description 发短评笔记popup
 */
export default function GpChatActionPopup({ open, closeFn, topicId }: IProps) {
  function handleClick(path: PagePath) {
    closeFn()
    function fulfilled() {
      const query: Recordable = {}
      if (topicId) {
        query.topicId = topicId
      }
      navigation(path, query)
    }
    authActionHandler(fulfilled, {
      mobile: true,
      avatarAndNickname: true
    })
  }
  return (
    <Popup rounded placement="bottom" open={open} onClose={closeFn}>
      <View className="bg-white">
        <View
          className="flex flex-col justify-center items-center box-border mt-48px"
          onClick={() => handleClick(pageMapperCommunity.ShortComment)}
        >
          <Image
            src="/images/yikao-community/chatachat.png"
            className="w-80px h-80px block object-cover"
          />
          <View className="text-bold text-32px mt-24px font-500">聊一聊</View>
          <View className="text-24px font-400 text-light mt-16px">简单聊一下，发表看法</View>
        </View>
        <View
          className="flex flex-col justify-center items-center box-border mt-64px"
          onClick={() => handleClick(pageMapperCommunity.NotePublish)}
        >
          <Image
            src="/images/yikao-community/sendnote.png"
            className="w-80px h-80px block object-cover"
          />
          <View className="text-bold text-32px mt-24px font-500">发笔记</View>
          <View className="text-24px font-400 text-light mt-16px">晒图片，分享你的观点</View>
        </View>
        <View className={styles.cancelBtn} onClick={closeFn}>
          取消
        </View>
      </View>
    </Popup>
  )
}
